.offset(@position; @top; @left;) {
  position: @position;
  left: @left;
  top: @top;
}

.offset(@top; @left;) {
  .offset(absolute; @top; @left;);
}

.offset-t(@position; @top;){
  position: @position;
  top: @top;
}

.offset-t(@top;){
  .offset-t(absolute; @top);
}

.offset-l(@position; @left;){
  position: @position;
  left: @left;
}

.offset-l(@left;){
  .offset-l(absolute; @left);
}

.offset-r(@position; @right;){
  position: @position;
  right: @right;
}

.offset-r(@right;){
  .offset-r(absolute; @right);
}

.offset-b(@position; @bottom;){
  position: @position;
  bottom: @bottom;
}

.offset-b(@bottom;){
  .offset-b(absolute; @bottom);
}

.offset-tl(@position; @top; @left;) {
  position: @position;
  left: @left;
  top: @top;
}

.offset-tl(@top, @left) {
  .offset-tl(absolute, @top, @left);
}

.offset-lt(@position; @left; @top;) {
  position: @position;
  left: @left;
  top: @top;
}

.offset-lt(@left; @top;) {
  .offset-lt(absolute, @left, @top);
}

.offset-br(@position; @bottom; @right;) {
  position: @position;
  right: @right;
  bottom: @bottom;
}

.offset-br(@bottom; @right;) {
  .offset-br(absolute; @bottom; @right;);
}

.offset-rb(@position; @right; @bottom;) {
  position: @position;
  right: @right;
  bottom: @bottom;
}

.offset-rb(@right; @bottom;) {
  .offset-rb(absolute; @right; @bottom;);
}

.offset-bl(@position; @bottom; @left;) {
  position: @position;
  left: @left;
  bottom: @bottom;
}

.offset-bl(@bottom; @left;) {
  .offset-bl(absolute; @bottom; @left;);
}

.offset-lb(@position; @left; @bottom;) {
  position: @position;
  left: @left;
  bottom: @bottom;
}

.offset-lb(@left; @bottom;) {
  .offset-lb(absolute; @left; @bottom;);
}

.offset-tr(@position; @top; @right;) {
  position: @position;
  right: @right;
  top: @top;
}

.offset-tr(@top; @right;) {
  .offset-tr(absolute; @top; @right;);
}

.offset-rt(@position; @right; @top;) {
  position: @position;
  right: @right;
  top: @top;
}

.offset-rt(@right; @top;) {
  .offset-rt(absolute; @right; @top;);
}

.thin-border(@color: #000) when (iscolor(@color)) {
  border: 1px solid @color;
}

.color-setting(@backgroundColor: #fff;@color: #000;) when (iscolor(@backgroundColor)) and (iscolor(@color)) {
  background-color: @backgroundColor;
  color: @color;
}

.margin-center(@top; @bottom) {
  margin: @top auto @bottom;
}

.margin-center(@topbottom;) {
  margin: @topbottom auto;
}

.margin-center() {
  margin: 0 auto;
}

.clearfix() {
  *zoom:1;
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
  }
}

.img-replace(@url;) when (isurl(@url)) {
  background: url(@url) 0 0 no-repeat;
  text-indent: -999em;
}

.img-replace(@url; @width; @height;) when (isurl(@url)) {
  background: url(@url) 0 0 no-repeat;
  text-indent: -999em;
  width: @width;
  height: @height;
}

.img-replace() {
  text-indent: -999em;
}

// Borrowed from Bootstrap mixins

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

#gradient {

  // Horizontal gradient, from left to right
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
    background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
    background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
  }

  // Vertical gradient, from top to bottom
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);  // Safari 5.1-6, Chrome 10+
    background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);  // Opera 12
    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
  }
}

.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Animations
.animation(@animation) {
  -webkit-animation: @animation;
       -o-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}
.animation-fill-mode(@fill-mode) {
  -webkit-animation-fill-mode: @fill-mode;
          animation-fill-mode: @fill-mode;
}

// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`

.backface-visibility(@visibility){
  -webkit-backface-visibility: @visibility;
     -moz-backface-visibility: @visibility;
          backface-visibility: @visibility;
}

// Drop shadows
//
// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
// supported browsers that have box shadow capabilities now support it.

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}

// CSS3 Content Columns
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
  -webkit-column-count: @column-count;
     -moz-column-count: @column-count;
          column-count: @column-count;
  -webkit-column-gap: @column-gap;
     -moz-column-gap: @column-gap;
          column-gap: @column-gap;
}

// Optional hyphenation
.hyphens(@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
     -moz-hyphens: @mode;
      -ms-hyphens: @mode; // IE10+
       -o-hyphens: @mode;
          hyphens: @mode;
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color;   // Firefox
                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

// Transformations
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
      -ms-transform: scale(@ratio); // IE9 only
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.scale(@ratioX; @ratioY) {
  -webkit-transform: scale(@ratioX, @ratioY);
      -ms-transform: scale(@ratioX, @ratioY); // IE9 only
       -o-transform: scale(@ratioX, @ratioY);
          transform: scale(@ratioX, @ratioY);
}
.scaleX(@ratio) {
  -webkit-transform: scaleX(@ratio);
      -ms-transform: scaleX(@ratio); // IE9 only
       -o-transform: scaleX(@ratio);
          transform: scaleX(@ratio);
}
.scaleY(@ratio) {
  -webkit-transform: scaleY(@ratio);
      -ms-transform: scaleY(@ratio); // IE9 only
       -o-transform: scaleY(@ratio);
          transform: scaleY(@ratio);
}
.skew(@x; @y) {
  -webkit-transform: skewX(@x) skewY(@y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
       -o-transform: skewX(@x) skewY(@y);
          transform: skewX(@x) skewY(@y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
       -o-transform: rotateX(@degrees);
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
       -o-transform: rotateY(@degrees);
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}


// Transitions

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}


// User select
// For selecting text on the page

.user-select(@select) {
  -webkit-user-select: @select;
     -moz-user-select: @select;
      -ms-user-select: @select; // IE10+
          user-select: @select;
}

// Apple iPhone 3GS 320x480 dpr:1
// Apple iPhone 4 320x480 dpr:2
// Apple iPhone 5 320x568 dpr:2
// Apple iPhone 6 375x667 dpr:2
// Apple iPhone 6 Plus 414x736 dpr:3
// BlackBerry Z10 384x640 dpr:2
// BlackBerry Z30 360x640 dpr:2
// Google Nexus 4 384x640 dpr:2
// Google Nexus 5 360x640 dpr:3
// Google Nexus S 320x533 dpr:1.5
// HTC Evo,Touch HD,Desire HD,Desire 320x533 dpr:1.5
// HTC One X,EVO LTE 360x640 dpr:2
// HTC Sensation,EVO 3D 360x640 dpr:1.5
// LG Optimus 2X,Optimus 3D,Optimus Black 320x533 dpr:1.5
// LG Optimus G 384x640 dpr:2
// LG Optimus LTE,Optimus 4X HD 424x753 dpr:1.7
// LG Optimus One 213x320 dpr:1.5
// Motorola Defy,Droid,Droid X,Milestone 320x569 dpr:1.5
// Motorola Droid 3,Droid 4,Droid Razr,Atrix 4G,Atrix 2 540x960 dpr:1
// Motorola Droid Razr HD 720x1280 dpr:1
// Nokia C5,C6,C7,N97,N8,X7 360x640 dpr:1
// Nokia Lumia 7X0,Lumia 8XX,Lumia 900,N800,N810,N900 320x533 dpr:1.5
// Samsung Galaxy Note 400x640 dpr:2
// Samsung Galaxy Note 3 360x640 dpr:3
// Samsung Galaxy Note II 360x640 dpr:2
// Samsung Galaxy S III,Galaxy Nexus 360x640 dpr:2
// Samsung Galaxy S,S II,W 320x533 dpr:1.5
// Samsung Galaxy S4 360x640 dpr:3
// Sony Xperia S,Ion 360x640 dpr:2
// Sony Xperia Sola,U 480x854 dpr:1
// Sony Xperia Z,Z1 360x640 dpr:3
// 
// 魅族 MX3 432x720(598) dpr:2.5

// // learn from @树残由尔
// .responsive-wrapper() {
//   // 1.5em = 24px
//   @baseFontSize:24/16em;
//   // unit width
//   @unit:40px;
//   // (>=640px) -> 640px
//   @media screen and (min-width: @unit * 16px) {
//     font-size: @baseFontSize; // 1.5em - 24px
//   }
//   // (>=540px <640px) -> 540px
//   @media screen and (max-width: @unit * 16 - 1px) {
//     font-size: @baseFontSize * (540/640); // 1.265625em - 20.25px
//   }
//   // (>=480px <540px) -> 480px
//   @media screen and (max-width: @unit * 13 + 20 - 1px) {
//     font-size: @baseFontSize * (480/640); // 1.125em - 18px
//   }
//   // (>=432px <480px) -> 432px
//   @media screen and (max-width: @unit * 12 - 1px) {
//     font-size: @baseFontSize * (432/640); // 1.0125em - 16.2px
//   }
//   // (>=414px <432px) -> 414px
//   @media screen and (max-width: @unit * 10 + 32 - 1px) {
//     font-size: @baseFontSize * (414/640); // 0.9703125em - 15.525px
//   }
//   // (>=400px <414px) -> 400px
//   @media screen and (max-width: @unit * 10 + 14 - 1px) {
//     font-size: @baseFontSize * (400/640); // 0.9375em - 15px
//   }
//   // (>=375px <400px) -> 375px
//   @media screen and (max-width: @unit * 10 - 1px) {
//     font-size: @baseFontSize * (375/640); // 0.87890625em - 14.0625px
//   }
//   // (>=360px <375px) -> 360px
//   @media screen and (max-width: @unit * 9 + 15 - 1px) {
//     font-size: @baseFontSize * (360/640); // 0.84375em - 13.5px
//   }
//   // (<360px) -> 320px
//   @media screen and (max-width: @unit * 9 - 1px) { // ( ,400) - 320px
//     font-size: @baseFontSize * (320/640); // 0.75em - 12px
//   }
// }


// learn from @树残由尔
.responsive-wrapper() {
  // 1.5em = 24px
  @baseFontSize:24/16em;
  // (>=640px) -> 640px
  @media screen and (min-width: 640px) {
    font-size: @baseFontSize; // 1.5em - 24px
  }
  // (>=540px <640px) -> 540px
  @media screen and (max-width: (640 - 1px)) {
    font-size: @baseFontSize * (540/640); // 1.265625em - 20.25px
  }
  // (>=480px <540px) -> 480px
  @media screen and (max-width: (540 - 1px)) {
    font-size: @baseFontSize * (480/640); // 1.125em - 18px
  }
  // (>=432px <480px) -> 432px
  @media screen and (max-width: (480 - 1px)) {
    font-size: @baseFontSize * (432/640); // 1.0125em - 16.2px
  }
  // (>=424px <432px) -> 424px
  @media screen and (max-width: (432 - 1px)) {
    font-size: @baseFontSize * (424/640); // 0.99375em - 15.9px
  }
  // (>=414px <424px) -> 414px
  @media screen and (max-width: (424 - 1px)) {
    font-size: @baseFontSize * (414/640); // 0.9703125em - 15.525px
  }
  // (>=400px <414px) -> 400px
  @media screen and (max-width: (414 - 1px)) {
    font-size: @baseFontSize * (400/640); // 0.9375em - 15px
  }
  // (>=384px <400px) -> 384px
  @media screen and (max-width: (400 - 1px)) {
    font-size: @baseFontSize * (384/640); // 0.9em - 14.4px
  }
  // (>=375px <384px) -> 375px
  @media screen and (max-width: (384 - 1px)) {
    font-size: @baseFontSize * (375/640); // 0.87890625em - 14.0625px
  }
  // (>=360px <375px) -> 360px
  @media screen and (max-width: (375 - 1px)) {
    font-size: @baseFontSize * (360/640); // 0.84375em - 13.5px
  }
  // (<360px) -> 320px
  @media screen and (max-width: (360 - 1px)) { // ( ,400) - 320px
    font-size: @baseFontSize * (320/640); // 0.75em - 12px
  }
}


.arrow-base(@width) {
  .square(0);
  /*display: inline-block;
  font-size: 0;
  line-height: 0;*/
  border: @width solid transparent;
}

.arrow-down(@width; @color: #000;) {
  .arrow-base(@width);
  border-top-color: @color;
  border-bottom-width: 0;
}

.arrow-up(@width; @color: #000;) {
  .arrow-base(@width);
  border-bottom-color: @color;
  border-top-width: 0;
}

.arrow-left(@width; @color: #000;) {
  .arrow-base(@width);
  border-left-color: @color;
  border-right-width: 0;
}

.arrow-right(@width; @color: #000;) {
  .arrow-base(@width);
  border-right-color: @color;
  border-left-width: 0;
}

.circle(@radius; @color: #000) {
  .square(0);
  /*display: inline-block;
  font-size: 0;
  line-height: 0;*/
  border: @radius solid @color;
  border-radius: 50%;
}

.hide() {
  display: none;
}

.background-size(@size) {
  -webkit-background-size: @size;
          background-size: @size;

}

.bg(@url, @width, @height) when (isstring(@url)) {
  background: data-uri(@url) 0 0 no-repeat;
  .size(@width;@height);
  .background-size(cover);
}

.bg(@url, @width, @height) when (isurl(@url)) {
  background: @url 0 0 no-repeat;
  .size(@width;@height);
  .background-size(cover);
}

.margin-lt(@left; @top) {
  margin-left: @left;
  margin-top: @top;
}

.margin-tl(@left; @top) {
  .margin-lt(@left; @top);
}

